import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import styles from './css/deail.module.css'

const Deail = () => {
  const nav = useNavigate()
  const { state } = useLocation()

  return (
    <div>
       {/*预定渲染布局*/}
      <NavBar onBack={() => nav(-1)}>预定</NavBar>
      <dl className={styles.dl}>
        <dt>
          <img src={state.image} alt='' style={{ width: "100px", height: "100px" }} />
        </dt>
        <dd>{state.title}</dd>
        <dd>{state.date}</dd>
        <dd className={styles.price}>￥{state.price}</dd>
      </dl>
    </div>
  )
}

export default Deail
